// 实现使用函数调用xtx-message组件的逻辑
// 这个函数将来： 导入直接使用，也可以挂载在vue实例原型上
// 方法1
// import Message from 'Message'
// 使用Message({ type: 'error',text:'提示文字'})
// 方法2 挂载到实例原型上
// this.$message({ type: 'error', text: '提示文字' })


// 1. 导入组件
import { createVNode, render } from 'vue'
import XtxMessage from './xtx-message.vue'

// 准备dom容器
// 3. 准备一个装载组件的DOM容器
const div = document.createElement('div')
    // .setAttribute设置属性 js原生
div.setAttribute('class', 'xtx-message-container')
document.body.appendChild(div)
    // 定时器标识
let timer = null

export default ({ type, text }) => {
    // 实现：根据xtx-message.vue渲染消息提示
    // 渲染组件
    // 2. 根据组件创建虚拟节点（将组件编译为DOM节点）
    // createVNode(组件，属性对象（props）)
    const vnode = createVNode(XtxMessage, { type, text })
        // 4. 把虚拟节点渲染DOM容器中
        // render(虚拟节点, DOM容器)
    render(vnode, div)
        // 5. 开启定时，移出DOM容器内容(3s后销毁组件)
    clearTimeout(timer)
    timer = setTimeout(() => {
        render(null, div)
    }, 3000)
}